<!-- 访客 -->
<template>
	<view class="sustem-setting">
		<van-tabs v-model:active="state.active" animated swipeable @change="tabChange">
			<van-tab title="谁看过我">
				<view class="scroll-main">
					<scroll-view :scroll-top="state.scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
						@scrolltolower="lower">
						<view class="blacklist-main-list">
							<view class="blacklist-main" v-for="item in state.listData" :key="item.ID"
								@click="viewDynamic(item)">
								<view class="blacklist-item-left">
									<HeadImg :headAvatar="item.UserInfo.Avatar" :RealState="item.UserInfo.RealState"
										:imgWidth="100" />
									<view class="name-base-info">
										<view class="name" :class="!state.userInfo.VipState ? 'name-blur' : ''">
											<text>{{ item.UserInfo.ShowName }}</text>
											<SexMain :userInfo="item.UserInfo" />
										</view>
										<view class="base-info">
											{{ item.UserInfo.Height + 'cm · '+  item.UserInfo.Weight + 'kg · '+ item.UserInfo.StrJob}}
										</view>
									</view>
								</view>
								<view class="blacklist-item-right" @click="unFollowUserFn(item)">
									<view class="timer-box">{{ timerFn(item.Visitor.AddTime)}}</view>
									<view><img src="@/assets/image/icon03.png" />
										<text>{{(item.JuLi / 1000).toFixed(1)}}km</text>
									</view>
								</view>
							</view>
							<Empty v-if="state.listData.length == 0" title="暂无列表" />
						</view>
					</scroll-view>
					<van-button v-if="!state.userInfo.VipState && state.active == 0" type="primary"
						@click="checkVisitor('3')">查看访客</van-button>
				</view>
			</van-tab>
			<van-tab title="我看过谁">
				<view class="scroll-main">
					<scroll-view :scroll-top="state.scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
						@scrolltolower="lower">
						<view class="blacklist-main-list">
							<view class="blacklist-main" v-for="item in state.listData" :key="item.ID"
								@click="viewDynamic(item)">
								<view class="blacklist-item-left">
									<HeadImg :headAvatar="item.UserInfo.Avatar" :RealState="item.UserInfo.RealState"
										:imgWidth="100" />
									<view class="name-base-info">
										<view class="name"><text>{{ item.UserInfo.ShowName }}</text>
											<SexMain :userInfo="item.UserInfo" />
										</view>
										<view class="base-info">
											{{ item.UserInfo.Height + 'cm · '+  item.UserInfo.Weight + 'kg · '+ item.UserInfo.StrJob}}
										</view>
									</view>
								</view>
								<view class="blacklist-item-right" @click="unFollowUserFn(item)">
									<view class="timer-box">{{ timerFn(item.Visitor.AddTime)}}</view>
									<view><img src="@/assets/image/icon03.png" />
										<text>{{(item.JuLi / 1000).toFixed(1)}}km</text>
									</view>
								</view>
							</view>
						</view>
						<Empty v-if="state.listData.length == 0" title="暂无列表" />
					</scroll-view>
					<van-button v-if="state.active == 1" type="primary" @click="checkVisitor('5')">一键隐身</van-button>
				</view>
			</van-tab>
		</van-tabs>
		<AuthPup :types="2" ref="AuthPupRef">
			<template #auth>
				<OpenMember :curIndex="state.curIndex" />
			</template>
		</AuthPup>
	</view>
</template>

<script setup>
	import {
		reactive,
		getCurrentInstance,
		onMounted,
		ref
	} from "vue"
	import {
		getAuthorization,
		setAuthorization
	} from "@/utils/auth.js"
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		timer
	} from "@/utils/tool.js"

	import {
		VisitorUsers, // 谁看过我
		UserVisitors, // 我看过谁 一键隐身
		UserInfo, // 获取用户信息
	} from "@/api/person/index.js"

	let {
		proxy
	} = getCurrentInstance()

	const state = reactive({
		checked: false,
		curIndex: 3,
		PageIndex: 1,
		PageSize: 20,
		listData: [],
		userInfo: {},
		active: 0
	})

	const VisitorUsersFn = async () => {
		let params = {
			PageIndex: state.PageIndex,
			PageSize: state.PageSize
		}
		uni.showLoading()
		let data = await proxy.$get(VisitorUsers, params)
		uni.hideLoading()
		if (data.code == 200) {
			state.listData = state.listData.concat(data.data)
		}
	}

	const UserVisitorsFn = async () => {
		let params = {
			PageIndex: state.PageIndex,
			PageSize: state.PageSize
		}
		uni.showLoading()
		let data = await proxy.$get(UserVisitors, params)
		uni.hideLoading()
		if (data.code == 200) {
			state.listData = state.listData.concat(data.data)
		}
	}

	const UserInfoFn = async () => {
		let data = await proxy.$get(UserInfo + getAuthorization("userId"))
		state.userInfo = data.data
		if (data.code == 200) {
			setAuthorization("userInfo", JSON.stringify(data.data))
			getData()
		}
	}

	// 取消关注
	const unFollowUserFn = async (item) => {
		try {
			uni.showLoading()
			let data = proxy.$del(unFollowUser + item.ID)
			uni.hideLoading()
			if (data.code == 200) {
				state.listData = state.listData.filter(o => o.ID != item.ID)
				uni.showToast({
					title: "取消关注成功",
					icon: "none"
				})
			}
		} catch (error) {
			uni.hideLoading()
		}
	}

	// 获取数据
	const tabChange = (ev) => {
		state.curIndex = ev
		state.PageIndex = 1
		state.PageSize = 20
		state.listData = []
		getData()
	}

	const getData = () => {
		if (state.curIndex == 0) {
			VisitorUsersFn()
		}
		if (state.curIndex == 1) {
			UserVisitorsFn()
		}
	}

	const upper = (e) => {

	}
	const lower = (e) => {
		state.PageIndex++
		getData()
	}

	// 一键隐身
	const UserVisitorsDelFn = async () => {
		let data = await proxy.$del(UserVisitors)
		if (data.code == 200) {
			uni.showToast({
				title: '操作成功',
				icon: "none"
			})
		}
	}

	// 查看访客
	let AuthPupRef = ref()
	const checkVisitor = (types) => {
		if (state.userInfo.VipState == 0) {
			if (state.userInfo.Sex == 0) {
				UserVisitorsDelFn()
				return
			}
			state.curIndex = types
			AuthPupRef.value.squareFn()
		} else {
			// 一键隐身
			if (types == 5) {
				UserVisitorsDelFn()
			}
		}
	}

	const viewDynamic = (item) => {
		uni.navigateTo({
			url: '/pages/home/person/dynamic/index?tabTypes=2&userId=' + item.UserInfo.ID
		})
	}

	const timerFn = (num) => {
		let yM = num ? num.split(' ')[0].split('-') : ""
		return yM ? yM[1] + '月' + yM[2] + '日' : ''
	}

	onLoad((options) => {})

	onMounted(() => {
		UserInfoFn()
	})
</script>

<style lang="scss" scoped>
	.sustem-setting {
		position: fixed;
		width: 100%;
		height: 100%;
	}

	.blacklist-item-head {
		display: flex;
		justify-content: space-between;
		position: sticky;
		top: 0;

		.blacklist-item {
			width: 33.33%;
			text-align: center;
			color: #999;
			padding: 20rpx 0;
			border-bottom: 1px solid #f2f2f2;

			text {
				font-size: 36rpx;
				font-weight: 600;
			}

			.blacklist-item-text {
				font-size: 24rpx;
			}
		}

		.blacklist-item-cur {
			color: #333;
		}
	}

	.blacklist-main {
		margin-top: 20rpx;
	}

	.blacklist-main,
	.blacklist-item-left {
		display: flex;
		align-items: center;
	}

	.blacklist-main {
		padding: 20rpx;
		justify-content: space-between;

		.name-base-info {
			margin-left: 20rpx;
		}

		.name {
			font-size: 32rpx;
			color: #262626;
			display: flex;
			align-items: center;
		}

		.base-info {
			font-size: 24rpx;
			color: #999999;
			margin-top: 10rpx;

		}

		.blacklist-item-right {
			text-align: right;
			font-size: 20rpx;
			color: #999999;

			.timer-box {
				margin-bottom: 5rpx;
			}

			img {
				width: 24rpx;
				height: 24rpx;
			}
		}
	}

	.scroll-Y {
		height: calc(100vh - 176rpx);
		overflow: auto;
		position: relative;
	}

	.scroll-main {
		position: relative;
		height: 100%;
	}

	:deep(.uni-scroll-view-content) {
		padding-bottom: 120rpx;
	}

	.van-button {
		position: absolute;
		width: calc(100vw - 60rpx);
		bottom: 30rpx;
		left: 30rpx;
	}

	.name-blur {
		-webkit-filter: blur(20px);
		filter: blur(5px)
	}
</style>
